<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="styles/easyui.css">
<link rel="stylesheet" type="text/css" href="styles/icon.css">
<link rel="stylesheet" type="text/css" href="styles/demo.css">
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.easyui.min.js"></script>

</head>
<body>
	<div>
		isbn &nbsp:&nbsp<input type="text" name="isbn" id="isbn" /> bookname
		&nbsp:&nbsp<input type="text" name="bookName" id="bookName" /> author
		&nbsp:&nbsp<input type="text" name="author" id="author" /> tag
		&nbsp:&nbsp<input type="text" name="tag" id="tag" />
	</div>
	<br>
	<input type="button" name="submit" id="submit" value="查询" />
	<br>
	<br>
	<br>

	<h2>书籍列表</h2>
	<div style="margin: 20px 0;"></div>
	<table id="dg" title="书籍列表" style="width: 1000px; height: 250px"
		data-options="rownumbers:true,singleSelect:true,pagination:true,url:'books/queryrtjson.action',method:'post'">
		<thead>
			<tr>
				<th data-options="field:'isbn',width:80">ISBN</th>
				<th data-options="field:'language',width:60">language</th>
				<th data-options="field:'bookName',width:80,align:'right'">bookName</th>
				<th data-options="field:'author',width:60,align:'right'">author</th>
				<th data-options="field:'publish',width:60">publish</th>
				<th data-options="field:'tag',width:60,align:'center'">tag</th>
				<th data-options="field:'inTime',width:80,align:'center'">inTime</th>
				<th data-options="field:'lendTime',width:80,align:'center'">lendTime</th>
				<th data-options="field:'deadline',width:80,align:'center'">deadline</th>
				<th data-options="field:'borrower',width:80,align:'center'">borrower</th>
				<th data-options="field:'status',width:60,align:'center'">status</th>
				<th data-options="field:'callno',width:60,align:'center'">deadline</th>
				<th data-options="field:'type',width:60,align:'type'">type</th>
				<th data-options="field:'summary',width:80,align:'right'">summary</th>
			</tr>
		</thead>
	</table>

	<script type="text/javascript">
		$(function(){
			var pager = $('#dg').datagrid().datagrid('getPager');	// get the pager of datagrid
			pager.pagination({
				buttons:[{
					iconCls:'icon-search',
					handler:function(){
						alert('search');
					}
				},{
					iconCls:'icon-add',
					handler:function(){
						alert('add');
					}
				},{
					iconCls:'icon-edit',
					handler:function(){
						alert('edit');
					}
				}]
			});				
		})
	 	 $("#submit").click(function(){ 
	 		$('#dg').datagrid('load',{
	 			"booksModel.isbn": $("#isbn").val(), 
				"booksModel.bookName": $("#bookName").val(), 
				"booksModel.author": $("#author").val(), 
				"booksModel.tag": $("#tag").val()
	 		});
	 		
			}); 
	</script>


	<script>
   
    </script>
</body>
</html>